<template>
  <!-- 首页d搜索页的商品列表组件 -->
  <div class="goods">
    <ul>
      <!-- 绑定点击事件把遍历的i传过去 -->
      <li v-for="i in goodsList" :key="i.id" @click="gotoDetail(i)">
        <img :src="i.list_pic_url" alt="" />
        <p>{{ i.name }}</p>
        <span>{{ i.retail_price | formatMoney }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "GoodsList",
  // search组件传过来的
  props: ["goodsList"],
  data() {
    return {};
  },

  methods: {
    gotoDetail(i) {
      //   console.log(item);
      // 编程式导航
      this.$router.push({ path: "/xq", query: { id: i.id } });
    },
  },
};
</script>

<style lang="less" scoped>
.goods {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      padding: 3px;
      box-sizing: border-box;

      img {
        width: 100%;
        display: block;
      }
      p {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        // margin: auto;
        // display: flex;
        // flex-direction: row;
      }
      span {
        font-size: 17px;
        margin: auto;
        color: #8b0000;
        width: 100%;
        margin-left: 40px;
      }
    }
  }
}
</style>